<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Load</title>

    <script src="js/main.js"></script>
    <style>
        body {
            background: #aaaaaa;
        }

        table th {
            width: 100px;
            text-align: right;
        }

        table td {
            text-align: right;
        }

    </style>
</head>
<body>
<input type="text" id="id" placeholder="id">
<input type="number" id="con" placeholder="max concurrency" value="1" min="1">
<input type="number" id="total" placeholder="total request" value="1" min="1">
<button onclick="bench()">Benchmark</button>

<table>
    <thead>
    <tr>
        <th style="width: 160px">Time</th>
        <th>ID</th>
        <th style="width: 60px">并发</th>
        <th style="width: 70px">总数</th>
        <th style="width: 70px">完成</th>
        <th style="width: 60px">失败</th>
        <th>累计耗时</th>
        <th style="width: 50px">Qps</th>
        <th>实际耗时</th>
        <th>Rt</th>
    </tr>
    </thead>
    <tbody id="bench-table"></tbody>
</table>
<script>
    function bench() {
        get('/bench?' + appendParam('id', 'con', 'total'), function (data) {
            let r = JSON.parse(data);
            let last = document.getElementById('bench-table').innerHTML;
            last = `<tr>
                <td>${r.data.start}</td>
                <td>${r.data.id}</td>
                <td>${r.data.con}</td>
                <td>${r.data.total}</td>
                <td>${r.data.complete}</td>
                <td>${r.data.failed}</td>
                <td>${r.data.duration}</td>
                <td>${r.data.qps}</td>
                <td>${r.data.real_duration}</td>
                <td>${r.data.rt}</td>
                </tr>` + last;
            document.getElementById('bench-table').innerHTML = last;
        })
    }
</script>
</body>
</html>